<template>
  <div id="app">
    <div class="login">
      <div class="hero is-medium is-primary is-bold">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">
              科技园区会议室管理系统
            </h1>
            <h2 class="subtitle">
              <div class="login-form">
                <div class="level header">
                  <div class="level-left">
           <span class="icon">
              <i class="far fa-user"></i>
           </span>
                    <p>登录</p>
                  </div>
                </div>

                <div class="field is-horizontal">
                  <div class="field field-body">
                    <div class="field">
                      <p class="control is-expanded">
                        <input
                                class="input is-success"
                                placeholder="请输入邮箱"
                                v-model="loginParam.email"
                        />
                      </p>
                    </div>
                  </div>
                </div>
                <div class="field is-horizontal">

                  <div class="field-body">
                    <div class="field">
                      <p class="control is-expanded">
                        <input
                                class="input is-success"
                                type="password"
                                placeholder="请输入密码"
                                v-model="loginParam.pwd"
                        />
                      </p>
                    </div>
                  </div>
                </div>

                <div class="">
                  <button class="button" @click="login">
                    登录
                  </button>
                </div>
              </div>
            </h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import {toast} from "bulma-toast";

    export default {
        name: "Login",
        components: {},
        data: function () {
            return {
                loginParam: {
                    email: null,
                    pwd: null
                }
            }
        },
        methods: {
            login() {
                fetch('/user/login', {
                    method: "POST",
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify(this.loginParam)
                }).then(function (res) {
                    return res.json();
                }).then((res) => {
                    if (res.success) {
                        this.$router.push("/index");
                        toast({
                            message: "登录成功",
                            type: "is-success",
                            dismissible: true,
                            pauseOnHover: true
                        });

                    } else {
                        this.$router.push("/login");
                        toast({
                            message: "登录失败",
                            type: "is-danger",
                            dismissible: true,
                            pauseOnHover: true
                        });
                    }
                });
            }
        }
    }
</script>

<style>
  @import '~bulma/css/bulma.css';

  .login-form {
    width: 35%;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
  }

  .level {
    margin-bottom: 1px;
    font-size: 12px;
  }

  .header {
    margin: 17px;
    font-size: 18px;
  }

  .button {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
  }

  .login {
    text-align: center;
    color: #ffffff;
    margin-top: 60px;
  }
</style>
